1-3. Vue.js核心知识之表单绑定

我们可以用 v-model 指令在表单 input 及 textarea 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本输入框

<!-- 你可以通过变量message取到输入到文本框中的值 -->
<input v-model="message">
<p>你输入的内容: {{ message }}</p>
多行文本框
<!-- 注意这里如果在文本区域插值 (<textarea></textarea>) 并不会生效 -->
<textarea v-model="message"></textarea>
<p>你输入的内容：{{ message }}</p>
单选框
<!-- 变量sex就是选中项的对应的value值 -->
<template>
<div id="radio">
  <input type="radio" id="male" value="男" v-model="sex">
  <label for="male">男</label>
  <br>
  <input type="radio" id="female" value="女" v-model="sex">
  <label for="female">女</label>
  <br>
  <span>选择的性别： {{ sex }}</span>
</div>
</template>
<script>
new Vue({
  el: '#radio',
  data: {
    sex: '男' // 使默认选中'男'
  }
})
</script>

多选框

<template>
<div id='checkbox'>
  <input type="checkbox" id="apple" value="苹果" v-model="fruit">
  <label for="apple">苹果</label>
  <input type="checkbox" id="orange" value="桔子" v-model="fruit">
  <label for="orange">桔子</label>
  <input type="checkbox" id="banana" value="香蕉" v-model="fruit">
  <label for="banana">香蕉</label>
  <br>
  <span>选中喜欢的水果： {{ fruit }}</span>
</div>
</template>
<script>
new Vue({
  el: '#checkbox',
  data: {
    fruit: ['香蕉'] // 使默认选中'香蕉'
  }
})
</script>

下拉单选框

<!-- 变量city就是你下拉选择项的value值 -->
<template>
<div id="select">
  <select v-model="city">
    <option disabled value="">请选择</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>杭州</option>
  </select>
  <span>你选中的城市: {{ city }}</span>
</div>
</template>
<script>
new Vue({
  el: '#select',
  data: {
    selected: '' // 使默认选择'请选择'
  }
})
</script>

下拉多选框

<!-- 下拉选项是动态渲染出来的，而且这里添加multiple表示下拉多选，那么city对应的值将会是数组的形式 -->
<template>
<div id="multiple-select">
  <select v-model="city" multiple>
    <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
    </option>
  </select>
  <span>你选中的城市: {{ city }}</span>
</div>
</template>
<script>
new Vue({
  el: '#multiple-select',
  data: {
    options: [
      { text: '北京', value: '北京' },
      { text: '上海', value: '上海' },
      { text: '广州', value: '广州' },
      { text: '深圳', value: '深圳' },
      { text: '杭州', value: '杭州' }
    ],
    selected: []
  }
})
</script>

总结

这节我们学习了HTML中表单的单行文本框、多行文本框、单选框、多选框、下拉单选框、下拉多选框等元素在vue.js中的数据绑定，同时也学习了通过给绑定的变量赋值来控制表单元素的默认值，很简单吧。